<template>
    <div class="personBooking">
        <!-- 散客预约 -->
        <div class="date">
            <date-picker @dayStatus="dayStatus" :calendarInfo="calendarInfo" @checkDay="checkDay"
                         @initTpList="initTpList" v-if="calendarInfo.yy_date.length>0"></date-picker>
        </div>
        <div class="timeIn">
            <h3 class="title">入馆时段</h3>
            <div class="times">
                <div :class="{'time':true, 'check':tp_id==time.tp_id}"
                     v-for="time in tpList"
                     :key="time.tp_id"
                     @click="checkTime(time)">
                    <p class="name">{{time.time_show}}</p>
                    <!-- <p class="surplus">余票：{{remainTicket(time.tickets)}}</p> -->
                    <!-- v-show="remainTicket(time.tickets)" -->
                </div>
            </div>
            <div class="picks">
                <div class="pick" v-for="(ticket, index) in tickets" :key="index">
                    <div class="name">
                        <span class="label">{{ticket.ticket_name}}：</span>

                        <span class="money">¥ {{ticket.ticket_price}}/人</span>
                    </div>
                    <div>
                        <!-- <my-step v-model="nums[ticket.td_tp_id]" :setvalue="0" :min="0"></my-step> -->
                        <van-stepper disabled class="step" min="0" v-model="nums[ticket.td_tp_id]" theme="round" button-size="22"
                                     disable-input/>
                    </div>
                </div>
            </div>
            <p class="note">(注：优惠票的涉及群体，例如：老年，学生)</p>
            <div class="children">
                <div class="pick">
                    <div class="name">
                        <span class="label">随行儿童：</span>
                    </div>
                    <div>
                        <!-- <my-step v-model="nums[ticket.td_tp_id]" :setvalue="0" :min="0"></my-step> -->
                        <van-stepper disabled class="step" min="0" v-model="childNums" theme="round" button-size="22"
                                     disable-input/>
                    </div>
                </div>
            </div>
        </div>

        <div class="showCoupon">
            <div class="radioBox">
                <span :class="['radio',checkCouple&&checkCouple.id?'check':'']">
                    <van-icon name="success"/>
                </span>
                <span class="title">{{couponTip}}</span>
            </div>
            <span class="more" @click="openCoupons">

            </span>
        </div>

        <div class="notice">
            <p class="title">参观须知</p>
            <div class="artical" style="white-space: pre-wrap;" v-html="textTip">
            </div>
        </div>
        <div class="total">
            <p>
                合计金额：
                <span class="money">¥{{total}}</span>
                <span class="num">（{{totalNum}}张）</span>
            </p>
            <div class="btn disabled" @click="ticketorder">
                提 交
            </div>
        </div>
        <van-overlay :show="show" :duration=".5" :lock-scroll="false" @click="show = false">
            <div v-show="show" :class="['couponBox', 'in']" @click.stop>
                <div class="header">
                    <span class="header_name">更多优惠券</span>
                    <span class="explain">使用说明</span>
                </div>
                <ul class="coupons">
                    <li class="coupon" @click="checkCoupon(i)" v-for="(i, index) in myCoupon" :key="index">
                        <div class="left">
                            <p class="money">
                                ¥ <span>{{parseFloat(i.cprice)}}</span>
                            </p>
                            <p class="tip">
                                购买景区门票可用
                            </p>
                        </div>
                        <div class="right">
                            <p class="name">{{i.range_name}}</p>
                            <p class="time">
                                有效期至：{{i.date}}
                            </p>
                            <p class="remain">还剩 9 天过期</p>
                        </div>
                        <div class="radioBox">
                            <div :class="['radio', checkCouple.id==i.id?'check':'']">
                                <van-icon name="success"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    import datePicker from '../../../components/personDatePicker2'
    import myStep from '../../../components/step'
    import {getDate, CouponMyCoupon, pertextTip, ticketorder} from '../../../http/interface'
    import {Session} from '../../../assets/js/utils'

    export default {
        name: '',
        components: {
            datePicker,
            myStep
        },
        props: {
            needLogin: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                calendarInfo: {
                    yy_date: []
                },
                dayInfo: {},
                tpList: [],//person_tp_list
                tickets: [],
                tp_id: '',
                show: false,
                nums: {},
                myCoupon: [],
                checkCouple: {},//支付核销优惠劵
                textTip: '',
                preson_td_id: '',
                isDayCheck: false,
                childNums: 0
            }
        },
        computed: {
            total() {
                let num = 0
                let keys = Object.keys(this.nums)
                keys.forEach(e => {
                    let price = this.tickets.filter((t) => {
                        return t.td_tp_id == e
                    })[0].ticket_price
                    num += (price * 100) / 100 * this.nums[e]
                })
                num -= (parseFloat(this.checkCouple.cprice) || 0)
                //总价小于0返回0
                if (num <= 0) {
                    return 0
                }
                return num.toFixed(2)
            },
            totalNum() {
                let num = 0
                let keys = Object.keys(this.nums)
                for (let i in this.nums) {
                    num += this.nums[i]
                }
                return num
            },
            couponTip() {
                // myCoupon.length>0?'使用优惠券抵扣'+parseFloat(checkCouple.cprice)+'元':'暂无可用优惠券'

                if (this.myCoupon.length >= 1) {
                    if (this.checkCouple && this.checkCouple.id) {
                        return '使用优惠券抵扣' + parseFloat(this.checkCouple.cprice) + '元'
                    } else {
                        return '请选择可使用的优惠卷'
                    }
                } else {
                    return '暂无可用优惠券'
                }
            }
        },
        mounted() {
            this.initSession()
            this.getDate()
            if (this.needLogin == 1) {
                this.getMyCoupon()
            }
            this.getPertextTip()
        },
        methods: {
            dayStatus(value) {
                this.isDayCheck = value
            },
            initSession() {
                //初始化天
                // this.preson_td_id = Session.get('preson_td_id')
                // 初始化时间段
                this.tpList = Session.get('person_tp_list') || []
                // 初始化选中时间段
                this.tp_id = Session.get('person_tp_id') || ''
                //初始化step
                // this.tickets = Session.get('person_tickets_list')||[]
            },
            async getMyCoupon() {
                try {
                    const res = await CouponMyCoupon(2, 0)
                    if (res.status == 1) {
                        this.myCoupon = res.data
                        if (this.myCoupon.length >= 1) {
                            this.checkCouple = this.myCoupon[0]
                        }
                    } else {

                    }
                } catch (error) {
                }
            },
            getDate() {
                // try {
                //     const res = await getDate()
                //     if (res.status == 1) {
                //         this.calendarInfo = res.data
                //     } else {

                //     }
                // } catch (error) {
                // }
                // console.log(this.getFirstDayOfWeek(new Date()))
                let first = this.getFirstDayOfWeek(new Date())
                console.log(this.timeFormat(new Date(new Date(first).getTime()+24*60*60*1000)))
                let arr = []
                for(let i=0;i<7;i++){
                    arr.push({
                        t_date: this.timeFormat(new Date(new Date(first).getTime()+((24*60*60*1000)*i))),
                        tp_last_stock_sum: 6000,
                        tp: [
                            [{
                                description: "",
                                pt_id: 1,
                                td_id: 218,
                                td_tp_id: 715,
                                ticket_name: "标准票",
                                ticket_price: 30,
                                tp_id: 1,
                                tp_last_stock: 1000,
                                tp_yytype: 0,
                            },
                            {
                                description: "",
                                pt_id: 1,
                                td_id: 219,
                                td_tp_id: 718,
                                ticket_name: "优惠票",
                                ticket_price: 15,
                                tp_id: 1,
                                tp_last_stock: 1000,
                                tp_yytype: 0
                            }],
                            [{
                                description: "",
                                pt_id: 1,
                                td_id: 218,
                                td_tp_id: 715,
                                ticket_name: "标准票",
                                ticket_price: 30,
                                tp_id: 1,
                                tp_last_stock: 1000,
                                tp_yytype: 0,
                            },
                            {
                                description: "",
                                pt_id: 1,
                                td_id: 219,
                                td_tp_id: 718,
                                ticket_name: "优惠票",
                                ticket_price: 15,
                                tp_id: 1,
                                tp_last_stock: 1000,
                                tp_yytype: 0
                            }]
                        ]
                    })
                }
                this.calendarInfo = {
                    yy_date: arr,
                    tps: [
                        {
                            time_period_show: "09:00-11:00",
                            tp_id: 1,
                            tp_yytype: 0,
                        },
                        {
                            time_period_show: "11:00-13:30",
                            tp_id: 2,
                            tp_yytype: 0
                        },
                        {
                            time_period_show: "13:30-17:30",
                            tp_id: 3,
                            tp_yytype: 0
                        }
                    ]
                }
                console.log(arr)
                // let end = this.timeFormat(new Date(first).getTime()+24*60*60*1000)

            },
            getFirstDayOfWeek (date) {

                var weekday = date.getDay()||7; //获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7

                date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
                return this.timeFormat(date);
            },
            timeFormat(date) {
                if (!date || typeof(date) === "string") {
                    this.error("参数异常，请检查...");
                }
                var y = date.getFullYear(); //年
                var m = date.getMonth() + 1; //月
                var d = date.getDate(); //日

                return this.addZero(y) + "-" + this.addZero(m) + "-" + this.addZero(d);
            },
            addZero(num) {
                if(num<10) {
                    return '0'+num
                }else{
                    return num
                }
            },
            checkDay(day) {
                if (day.td_id) {
                    Session.set('preson_td_id', day.td_id)
                } else {
                    Session.set('preson_td_id', null)
                }
                this.tpList = day.timeInfoList
                Session.set('person_tp_list', this.tpList || [])
                Session.set('person_tp_id', null)
                this.initTickets(this.tpList && this.tpList[0].tickets)
                this.clearTime()
            },
            initTpList(list) {
                let savelist = Session.get('person_tp_list')
                if (savelist && savelist.length) {
                    this.tpList = savelist
                    this.initTickets(Session.get('person_tickets_list'))
                } else {
                    this.tpList = list
                    this.initTickets(this.tpList[0].tickets)
                }
            },
            initTickets(value) {
                this.tickets = value
                this.initNums()
            },
            checkTime(time) {
                return;
                let num = 0
                time.tickets.forEach(e => {
                    num += e.tp_last_stock
                })
                if (num <= 0) {
                    this.$toast('该时段无票')
                    return
                }
                if (this.tp_id == time.tp_id) {
                    this.clearTime()
                    Session.set('person_tp_id', null)
                } else {
                    this.tp_id = time.tp_id
                    Session.set('person_tp_id', this.tp_id)
                }
                Session.set('person_tickets_list', time.tickets)
                this.initTickets(time.tickets)
            },
            clearTime() {
                this.tp_id = ''
            },
            remainTicket(arr) {
                let ticketNum = 0
                arr.forEach(e => {
                    ticketNum += e.tp_last_stock
                });
                return ticketNum
            },
            initNums() {
                this.nums = {}
                for (let i in this.tickets) {
                    this.$set(this.nums, this.tickets[i].td_tp_id, 0)
                }
            },
            openCoupons() {
                if (this.myCoupon.length == 0) {
                    return
                }
                this.show = true
            },
            checkCoupon(value) {
                if (this.checkCouple.id == value.id) {
                    this.checkCouple = {}
                } else {
                    this.checkCouple = value
                }
            },
            async getPertextTip() {
                try {
                    const res = await pertextTip()
                    if (res.status == 1) {
                        this.textTip = res.data.text_tip
                    } else {

                    }
                } catch (error) {
                }
            },
            async ticketorder() {
                return
                try {
                    if (!this.isDayCheck) {
                        this.$toast('请选择参观日期')
                        return
                    }
                    if (!this.tp_id) {
                        this.$toast('请选择参观时间')
                        return
                    }
                    let td_tp_id = []
                    let td_tp_id_count = []
                    let pt_id = []
                    let id
                    for (let i in this.nums) {
                        if (this.nums[i] > 0) {
                            td_tp_id.push(i)
                            td_tp_id_count.push(this.nums[i])
                            let tickit_pt_id = this.tickets.filter(t => {
                                return t.td_tp_id == i
                            })[0].pt_id
                            pt_id.push(tickit_pt_id)
                        }
                        // td_tp_id.push(i)
                        // td_tp_id_count.push(this.nums[i])
                        // let tickit_pt_id = this.tickets.filter(t => {
                        //     return t.td_tp_id == i
                        // })[0].pt_id
                        // pt_id.push(tickit_pt_id)
                    }
                    let data = {
                        td_tp_id: td_tp_id,
                        td_tp_id_count: td_tp_id_count,
                        pt_id: pt_id,
                    }
                    let a = td_tp_id_count[0] || 0//标准票数量
                    let b = td_tp_id_count[1] || 0//优惠票数量
                    if (this.childNums <= (a + b) * 2) {//随行儿童个数，最多等于（标准票+优惠票）*2
                        data.child_count = this.childNums
                    } else {
                        this.$toast('一个成人最多可带2名1.2米以下的未成年人')
                        return
                    }
                    if (this.checkCouple && this.checkCouple.id) {
                        id = this.checkCouple.id
                        data.id = id
                    }
                    if (td_tp_id.length <= 0) {
                        this.$toast('请选择购买门票')
                        return
                    }
                    // console.log(data)
                    const res = await ticketorder(data)
                    if (res.status == 1) {
                        this.$router.push({
                            path: '/personOrder',
                            query: {
                                orderId: res.data.torder_id
                            }
                        })
                    } else {
                        this.$toast(res.msg)
                    }
                } catch (error) {
                }

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/mixin.scss';

    .personBooking {
        padding-bottom: 170px;

        .date {
            max-width: 10rem;
            margin: 0 auto;
        }

        .timeIn {
            width: 100%;
            min-height: 410px;
            border-radius: 24px;
            background: #ffffff;
            margin-top: 20px;
            padding: 36px 30px;

            .title {
                font-size: 30px;
                font-weight: bold;
                color: #353535;
            }

            .times {
                margin-top: 29px;
                display: flex;
                justify-content: space-between;
                .time {
                    // width: 250px;
                    height: 84px;
                    background: #ccc;
                    border-radius: 10px;
                    padding: 12px 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex-shrink: 0;
                    // margin-right: 60px;
                    // margin-bottom: 20px;

                    
                    // width: 200px;
                    flex: 1;
                    // height: 84px;
                    // background: #feeece;
                    // border-radius: 10px;
                    // padding: 12px 0;
                    // display: flex;
                    // flex-direction: column;
                    // justify-content: space-between;
                    // flex-shrink: 0;
                    // margin-right: 60px;
                    margin: 0 12px;

                    &.check {
                        background: #F8A80B;
                        position: relative;

                        &::after {
                            content: '';
                            width: 52px;
                            height: 52px;
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            background: url('../../../../static/img/checktime.png') no-repeat center center;
                            background-size: 52px 52px;
                        }

                        .name {
                            color: #ffffff;
                        }

                        .surplus {
                            color: #ffffff;
                        }
                    }

                    .name {
                        font-size: 30px;
                        font-weight: 500;
                        text-align: center;
                        color: #646464;
                        line-height: 60px;
                    }

                    .surplus {
                        font-size: 24px;
                        font-weight: 400;
                        text-align: center;
                        color: #646464;
                    }
                }
            }

            .picks {
                margin-top: 40px;

                .pick {
                    width: 100%;
                    // height: 48px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 28px;

                    .name {
                        font-size: 30px;
                        font-weight: 500;
                        color: rgba(50, 50, 50, 1);
                        line-height: 48px;
                        max-width: 60%;

                        .label {
                            // white-space: nowrap;
                            display: inline-block;
                        }

                        .money {
                            color: #E10028;
                        }
                    }

                    /deep/ .step {
                        button {
                            background-color: #ffffff;
                            color: #F17F2A;
                            border: 1px solid #E5E5E5;
                        }

                        .stepper__minus {
                            &::before {
                                width: 2px;
                            }
                        }

                        .van-stepper__plus {
                            &::after {
                                width: 2px;
                            }
                        }

                        .van-stepper__minus--disabled {
                            color: #B1B2B4;
                        }
                    }
                }
            }

            .note {
                font-size: 24px;
                font-weight: 400;
                color: rgba(100, 100, 100, 1);
                margin-top: 20px;
                line-height: 1.5;
            }

            .children {
                margin-top: 20px;

                .pick {
                    width: 100%;
                    // height: 48px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 28px;

                    .name {
                        font-size: 30px;
                        font-weight: 500;
                        color: rgba(50, 50, 50, 1);
                        line-height: 48px;
                        max-width: 60%;

                        .label {
                            // white-space: nowrap;
                            display: inline-block;
                        }

                        .money {
                            color: #E10028;
                        }
                    }

                    /deep/ .step {
                        button {
                            background-color: #ffffff;
                            color: #F17F2A;
                            border: 1px solid #E5E5E5;
                        }

                        .stepper__minus {
                            &::before {
                                width: 2px;
                            }
                        }

                        .van-stepper__plus {
                            &::after {
                                width: 2px;
                            }
                        }

                        .van-stepper__minus--disabled {
                            color: #B1B2B4;
                        }
                    }
                }
            }
        }

        .showCoupon {
            height: 104px;
            padding: 0 40px;
            border-top: 1px solid #EEEEEE;
            border-bottom: 1px solid #EEEEEE;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffffff;
            border-radius: 24px;
            margin-top: 20px;

            .radioBox {
                height: 100%;
                display: flex;
                align-items: center;

                .radio {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    font-size: 18px;
                    background: #DFDFDF;
                    color: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 29px;

                    &.check {
                        background: #F17F2A;
                        animation: smallToBig .2s;
                    }
                }

                .title {
                    font-size: 30px;
                    font-weight: 500;
                    color: rgba(50, 50, 50, 1);
                    line-height: 85px;
                }
            }

            .radioSpan {
                font-size: 30px;
                line-height: 104px;
                max-width: 560px;
                display: inline-block;
                @include ellipsis(1);
            }

            .more {
                width: 36px;
                height: 36px;
                display: inline-block;
                background: url('../../../../static/img/zanwugengduo.png') no-repeat center center;
                background-size: 100% 100%;
            }
        }

        .notice {
            width: 100%;
            min-height: 355px;
            padding: 36px 30px;

            .title {
                font-size: 30px;
                font-weight: bold;
                color: rgba(50, 50, 50, 1);
                margin-bottom: 30px;
            }

            .artical {
                font-size: 28px;
                font-weight: 400;
                color: rgba(50, 50, 50, 1);
                line-height: 48px;
            }
        }

        .total {
            width: 100%;
            height: 170px;
            background: #ffffff;
            position: fixed;
            bottom: 0;
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;

            p {
                font-size: 32px;
                font-weight: 500;
                color: rgba(50, 50, 50, 1);
                max-width: 420px;
                word-break: break-all;

                .money {
                    color: #E10028;
                }

                .num {
                    color: #646464;
                }
            }

            .btn {
                width: 240px;
                height: 72px;
                border-radius: 36px;
                background: #F17F2A;
                color: #ffffff;
                line-height: 72px;
                text-align: center;
                font-size: 32px;

                &:active {
                    background: #ed9f65;
                }
                &.disabled{
                    background-color: #ccc;
                }
            }
        }

        .couponBox {
            width: 100%;
            max-height: 664px;
            background: #ffffff;
            position: absolute;
            bottom: 0;

            &.in {
                animation: fadeInUpBig;
                animation-duration: .7s;
            }

            .header {
                width: 100%;
                height: 116px;
                padding: 0 24px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .header_name {
                    font-size: 32px;
                    font-weight: 500;
                    color: rgba(50, 50, 50, 1);
                    line-height: 32px;
                    border-left: 3px solid #F28000;
                    text-indent: 21px;
                }

                .explain {
                    font-size: 28px;
                    font-weight: 400;
                    color: rgba(50, 50, 50, 1);
                    line-height: 116px;
                }
            }

            .coupons {
                max-height: 664px - 116px;
                padding: 0 30px;
                overflow-y: auto;

                .coupon {
                    width: 100%;
                    height: 202px;
                    background: url('../../../../static/img/youhuiquan.png') no-repeat left center;
                    background-size: 254px 202px;
                    margin-bottom: 30px;
                    border: 2px dashed #FC6F59;
                    border-left: none;
                    display: flex;

                    .left {
                        width: 254px;
                        height: 100%;
                        padding: 33px 0;
                        text-align: center;
                        // background: yellowgreen;
                        .money {
                            font-size: 28px;
                            color: #ffffff;
                            line-height: 100px;

                            span {
                                font-size: 64px;
                            }
                        }

                        .tip {
                            font-size: 24px;
                            font-weight: 500;
                            color: rgba(255, 255, 255, 1);
                        }
                    }

                    .right {
                        flex: 1;
                        padding: 32px 30px;

                        .name {
                            font-size: 32px;
                            font-weight: 500;
                            color: rgba(50, 50, 50, 1);
                            @include ellipsis(2);
                        }

                        .time {
                            font-size: 26px;
                            font-weight: 500;
                            color: rgba(50, 50, 50, 1);
                            // line-height: 82px;
                            margin: 10px 0;
                        }

                        .remain {
                            font-size: 24px;
                            font-weight: 400;
                            color: rgba(100, 100, 100, 1);
                        }
                    }

                    .radioBox {
                        width: 80px;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .radio {
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            font-size: 18px;
                            background: #DFDFDF;
                            color: #ffffff;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &.check {
                                background: #F17F2A;
                                animation: smallToBig .2s;
                            }
                        }

                        @keyframes smallToBig {
                            0% {
                                transform: scale(0)
                            }
                        }
                    }
                }
            }
        }
    }
</style>